<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>

<body>
    <h1>sessionStorage</h1><br>
    <input type="text" />
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        /* 
         浏览器存储数据：
            1. 数据存储在浏览器中
            2. 会话存储大约 5M ， 本地存储大约 20M
            3. 只能存储 json 字符串     k--v
            4. 使用时需要转化

        sessionStorage ： 会话存储
           1. 数据只能在单页面中使用
           2. 生命周期和页面同步
    */
        let input = document.querySelector("input");
        let set = document.querySelector(".set");
        let get = document.querySelector(".get");
        let remove = document.querySelector(".remove");
        let del = document.querySelector(".del");

        let hero = {
            name: "剑圣",
            sex: "男"
        }


        //localStorage 本地存储  sessionStorage 会话存储

        
        // 存储数据
        set.addEventListener('click', function () {
            
            sessionStorage.setItem('hero', '吕布')
            sessionStorage.setItem('value', input.value)
        });

        // 获取数据
        get.addEventListener('click', function () {
            let a = sessionStorage.getItem('hero');
            console.log(a);
        });
        // 删除指定数据
        remove.addEventListener('click',function(){
        sessionStorage.removeItem('hero');
        });

        // 清空(全部)数据
        del.addEventListener('click',function(){
        sessionStorage.clear();
        });
    </script>
</body>

</html>